<template>
	<view class="belong-container">
		<view @tap.stop="open">
			<slot name="action">
				<view class="belong-inner fc">
					<view v-if="belong" class="belong-main fc">
						<view class="fc" v-if="loading">
							<u-loading-icon color="#111111" size="32rpx"></u-loading-icon>
							<text class="ml10">加载中</text>
						</view>
						<block v-else>
							<view class="belong-main-info">
								<view class="u-line-1" v-if="belongName">{{ belongName[0] }}/{{ belongName[1] }}</view>
							</view>
							<u-icon bold color="#555555" size="22rpx" name="arrow-down"></u-icon>
						</block>
					</view>
					<view class="belong-main fc" v-else>选择校区</view>
				</view>
			</slot>
		</view>
		<!-- :defaultIndex="defaultIndex" -->
		<u-picker closeOnClickOverlay keyName="name" :show="show" ref="uPicker" :columns="columns" @close="close"
			@cancel="close" @confirm="confirm" @open="open" @change="changeHandler"></u-picker>
	</view>
</template>

<script>
	import {
		schoolTree
	} from '@/codecat/api/common';
	import {
		changeSchool
	} from '@/codecat/api/user';
	import {
		setBelong,
		setToken
	} from '@/codecat/utils/auth';
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				show: false,
				columns: [],
				columnData: [],
				// defaultIndex: [0, 0],
				loading: false
			};
		},
		mounted() {
			if (this.token) {
				this.getList();
			}
		},
		methods: {
			getBelongName() {
				const [institution, school] = this.belong;
				let institutionValue = this.columns[0].find((e) => e.id === institution);
				let schoolValue = institutionValue.children.find((e) => e.id === school);
				this.$store.commit('SET_BELONGNAME', [institutionValue.name, schoolValue.name]);
			},
			getList() {
				this.loading = true;
				schoolTree()
					.then((res) => {
						this.loading = false;
						if (Array.isArray(res.data) && res.data.length) {
							const columnData = [];
							res.data.map((e) => {
								columnData.push(e.children);
							});
							this.columnData = columnData;
							this.columns = [res.data, columnData[0]];
							this.getBelongName();
						}
					})
					.catch((_) => {
						this.loading = false;
					});
			},
			close() {
				this.show = false;
			},
			open() {
				this.show = true;
				const [institutionId, schoolId] = this.belong;
				const institutionIndex = this.columns[0].findIndex((e) => e.id === institutionId);
				const schoolList = this.columnData[institutionIndex];
				this.$refs.uPicker.setColumnValues(1, schoolList);
				const schoolIndex = schoolList.findIndex((e) => e.id === schoolId);
				this.$refs.uPicker.setIndexs([institutionIndex, schoolIndex]);
			},
			changeHandler(e) {
				const {
					columnIndex,
					index,
					picker = this.$refs.uPicker
				} = e;
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index]);
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				const [institution, school] = e.value;
				const val = [institution.id, school.id];

				// 注意：顺序不能改
				this.$store.commit('SET_ROLES', []);
				this.$store.commit('SET_PERMISSIONS', []);
				this.$store.commit('SET_USERINFO', {});

				setBelong(val);
				this.$store.commit('SET_BELONG', val);

				this.show = false;

				uni.showLoading({
					title: '处理中...',
					mask: true
				});

				changeSchool()
					.then((res) => {
						uni.hideLoading();
						const {
							token
						} = res.data;
						setToken(token);
						this.$store.commit('SET_TOKEN', token);
						this.$Router.replaceAll(this.$Route?.aliasPath || '/');
					})
					.catch((_) => {
						uni.hideLoading();
					});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.belong-container {
		width: 100%;
		padding: 24rpx 0;

		.belong-inner {
			padding: 0 32rpx;
		}

		.belong-main {
			color: #666666;
			background: rgba(255, 255, 255, 0.7);
			width: 100%;
			padding: 0 32rpx;
			height: 64rpx;
			border-radius: 32rpx;

			&-info {
				flex: 1;
				padding-right: 20rpx;
				font-size: 28rpx;
			}

			&-icon {
				@include center;
				width: 48rpx;
				height: 48rpx;
				background: linear-gradient(125deg, #94bfff, $u-primary);
				border-radius: 12rpx;
			}
		}
	}
</style>